<template>
    <main>
       <div class="List-Header"> 
           <ul>
               <li>商品介绍</li>
               <li>规格参数</li>
               <li>售后保障</li>
           </ul>
       </div>
       <div>
           <div v-for="(item,index) in list" :key="index" :class="'item' + index"> 
               <img :src="item.imgurl">
           </div>
       </div>
    </main>
</template>
<script>
export default {
    name:"DetailsList",
    data:()=>({
        List:[]
    }),
    props:['list'],
    watch:{
        list(){
            this.List=this.list;
           // console.log(this.List);
        }
        
    }
}
</script>
<style scoped lang="less">
 .List-Header{
     width: 23.4375rem;
     height: 3.8125rem;
     ul{
         display: flex;
         li{
             width: 7.8125rem;
             height: 3.8125rem;
             display: flex;
             justify-content: center;
             align-items: center;
         }
     }
     
 }
 .item0{
         width: 23.4375rem;
         height: 13.1875rem;
         padding-bottom: .3125rem;
         img{
             width: 100%;
             height: 100%;
         }
     }
.item1{
         width: 23.4375rem;
         height: 31.3125rem;
        padding-bottom: .3125rem;
         img{
             width: 100%;
             height: 100%;
         }
}
.item2{
         width: 23.4375rem;
         height: 31.28125rem;
         img{
             width: 100%;
             height: 100%;
         }
}
.item3{
         width: 23.4375rem;
         height: 30.1875rem;
         img{
             width: 100%;
             height: 100%;
         }
}
.item4{
         width: 23.4375rem;
         height: 28.875rem;
         img{
             width: 100%;
             height: 100%;
         }
}
.item5{
         width: 23.4375rem;
         height: 23.71875rem;
         img{
             width: 100%;
             height: 100%;
         }
}
.item6{
         width: 23.4375rem;
         height:20.75rem;
         img{
             width: 100%;
             height: 100%;
         }
}
.item7{
         width: 23.4375rem;
         height:39.09375rem;
         img{
             width: 100%;
             height: 100%;
         }
}
.item8{
         width: 23.4375rem;
         height:9.84375rem;
         img{
             width: 100%;
             height: 100%;
         }
}
.item9{
         width: 23.4375rem;
         height:29.40625rem;
         img{
             width: 100%;
             height: 100%;
         }
}
</style>